<template>
  <template v-if="show">
    <el-menu :default-active="activeIndex" mode="horizontal" @select="handleSelect">
      <MenuItem :menuLists="menu" />
    </el-menu>
    <div style="margin-top: 20px;">
      <RouterView />
    </div>
  </template>

  <template v-else>
    <el-row justify="center">
      <el-col style="text-align: center;">
        <el-empty :description="description" />
      </el-col>
    </el-row>
  </template>

</template>

<script setup>

import { RouterView } from 'vue-router'
import { getBotData, setDomain, getDomain } from '@/util/common'
import { menu } from '@/config/index'
import { ref } from 'vue'
import { ElMessageBox } from 'element-plus'
import MenuItem from '@/components/MenuItem.vue'
import { useRouter } from 'vue-router'

const show = ref(false)
const description = ref("数据读取中..")

const settingDomain = () => {
  ElMessageBox.prompt('请检查接口域名是否正确', 'Tip', {
    confirmButtonText: '确定',
    cancelButtonText: '关闭',
    inputValue: getDomain()
  })
    .then(({ value }) => {
      setDomain(value)
      setTimeout(() => {
        location.reload()
      }, 500)
    })
}

getBotData().then((res) => {
  localStorage.setItem("userdata", JSON.stringify(res))
  show.value = true
}).catch((err) => {
  settingDomain()
  description.value = "数据读取失败"
})

const activeIndex = ref('1')
const router = useRouter()
const handleSelect = (key, keyPath) => {
  router.push(key)
}

</script>
